// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

/**
 * 
 * useReducer
 *  useState 的替代方案。
 *  它接收一个形如 (state, action) => newState 的 reducer，
 *  并返回当前的 state 以及与其配套的 dispatch 方法
 * 
 *  在某些场景下，useReducer 会比 useState 更适用，
 *  例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等
 */

function reducer(state = { number: 0 }, action) {
  switch (action.type) {
    case 'ADD':
      return { number: state.number + 1 };
    case 'MINUS':
      return { number: state.number - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { number: 0 });
  return (
    <div>
      Count: {state.number}
      <button onClick={() => dispatch({ type: 'ADD' })}>+</button>
      <button onClick={() => dispatch({ type: 'MINUS' })}>-</button>
    </div>
  )
}
ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",